<template>
	<view class="page">
    <view class="page-navbar" :style="'background-image: url('+indexBg+');'">
      <u-navbar :fixed="false" title="我的信息" placeholder bgColor="transparent"></u-navbar>
    </view>
    <view class="form-info">
      <view class="form-box u-m-b-48">
        <view class="form-item">
          <view class="form-lable">企业logo</view>
          <view class="form-content-right">
            <u-upload
              :fileList="form.logo"
              accept='image'
              name="logo"
              :sizeType="['compressed']"
              :maxCount="1"
              @delete="deletePic($event, 'form')"
              @afterRead="afterRead($event, 'form')"
              :previewFullImage="true"
            ></u-upload>
          </view>
        </view>
        <view class="form-item">
          <view class="form-lable required">企业名称</view>
          <view class="form-content">
            <u--input placeholder="请输入" border="none" inputAlign="right" v-model="form.enterpriseName" />
          </view>
        </view>
        <view class="form-item">
          <view class="form-lable required">联系人姓名</view>
          <view class="form-content">
            <u--input placeholder="请输入" border="none" inputAlign="right" v-model="form.contacts" />
          </view>
        </view>
        <view class="form-item">
          <view class="form-lable required">统一社会信用代码</view>
          <view class="form-content">
            <u--input placeholder="请输入" border="none" inputAlign="right" v-model="form.usci" />
          </view>
        </view>
        <view class="form-item">
          <view class="form-lable">所在地区</view>
          <view class="form-content" @click="pickerType = 'region'">
            <u--input placeholder="请选择" readonly border="none" inputAlign="right" v-model="form.region" />
          </view>
        </view>
        <view class="form-item">
          <view class="form-lable">所属行业</view>
          <view class="form-content" @click="pickerType = 'industry'">
            <u--input placeholder="请选择" readonly border="none" inputAlign="right" v-model="form.industry" />
          </view>
        </view>
      </view>
      <view class="save-primary-btn-actions">
        <view class="save-primary-r-btn" @click="submit">保存</view>
      </view>
    </view>
    <u-picker :show="pickerType=='region'" @change="pickerChange" :columns="[cityOptions, cityOptions[pickerIndex].citys]" keyName="cityName" @confirm="pickerConfirm" @cancel="pickerType = ''"></u-picker>
    <u-picker :show="pickerType=='industry'" :columns="[industryList]" keyName="sectorName" @confirm="pickerConfirm" @cancel="pickerType = ''"></u-picker>
  </view>
</template>

<script>
import { getMyEnterpriseInfo, updateEnterpriseInfo, sectorList } from '@/api/index'
import citys from '@/common/citys.json'
import { uploadImage, phoneReg } from '@/common/util'

export default {
  data() {
    return {
      indexBg: 'https://gowork365.com/prod-api/profile/mini/index/indexBg1.png',
      cityOptions: citys.provinces,
      pickerType: '',
      pickerIndex: 0,
      form: {
        enterpriseName: '',
        contacts: '',
        usci: '',
        phone: '',
      },
      defaultForm: {
        enterpriseName: '',
        contacts: '',
        usci: '',
        phone: '',
      },
      industryList: [],
    }
  },
  onLoad(options) {
    this.getSectorList()
    this.getForm()
  },
  methods: {
    getSectorList() {
      sectorList({}).then(res => {
        this.industryList = res.data
      })
    },
    getForm() {
      uni.showLoading({ mask: true })
      getMyEnterpriseInfo({}).then(response => {
        uni.hideLoading()
        if(response.data.logo) {
          response.data.logo = [ 
            {
              status: "success",
              id: this.id,
              img: this.baseUrl + response.data.logo,
              type: 'logo',
              url: this.baseUrl + response.data.logo
            }
          ]
        }
        this.form = response.data;
      });
    },
    submit() {
      const that = this
      let formFlag = false
      for(let key in this.defaultForm) {
        if(this.form[key] === '') {
          formFlag = true
        }
      }
      if(formFlag) {
        uni.showToast({
          icon: 'none',
          title: '请完善基础信息'
        })
        return
      }
      if(!phoneReg(this.form.phone)) {
        return
      }
      const params = {
        ...this.form,
      }
      if(params.logo) {
        params.logo = this.form.logo.map(v => v.url.replace(this.baseUrl, "")).join()
      }
      uni.showLoading({ mask: true })
      updateEnterpriseInfo(params).then(response => {
        
        uni.hideLoading()
        uni.showToast({
          icon: 'none',
          title: '修改成功'
        })
        setTimeout(() => {
          that.goBack(1)
        }, 1000)
      });
    },
    deletePic(event, name, index=-1) {
      if(index > -1) {
        const info = this[name][index]
        info[event.name].splice(event.index, 1)
        this.$set(this[name], index, info)
        return
      }
      this[name][event.name].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event, name, index=-1) {
      let lists = [].concat(event.file);
      for (let i = 0; i < lists.length; i++) {
        const res = await uploadImage(lists[0]);
        if(res.code != 200) {
          return
        }
        if(index > -1) {
          const info = this[name][index]
          info[event.name] = [
            {
              status: "success",
              id: res.newFileName,
              img: res.fileName,
              type: event.name,
              url: this.baseUrl + res.fileName
            }
          ]
          this.$set(this[name], index, info)
          return
        } else {
          const img = [
            {
              status: "success",
              id: res.newFileName,
              img: res.fileName,
              type: event.name,
              url: this.baseUrl + res.fileName
            }
          ]
          this.$set(this[name], event.name, img)
        }
      }
    },
    pickerConfirm(e) {
      if(this.pickerType == 'region') {
        this.form.region = e.value[0].cityName + '-' + e.value[1].cityName
      } else {
        this.form.industry = e.value[0].sectorName
      }
      this.pickerType = ''
    },
    pickerChange(e) {
      if(e.columnIndex === 0) {
        this.pickerIndex = e.index
      }
    },
  }
}
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background: #F4F7F6;
  position: relative;
  padding-bottom: 188rpx;
  display: flex;
  flex-direction: column;
  .page-navbar {
    background-repeat: no-repeat;
    background-size: 750rpx 690rpx;
  }
  .form-info {
    flex: 1;
    .add-btn {
      width: 686rpx;
      height: 104rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8rpx;
      font-family: PingFangSC, PingFang SC;
      font-size: 28rpx;
      color: rgba(0,0,0,0.85);
      margin: 0 auto 56rpx;
      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
  .tabs-box {
    width: 686rpx;
    height: 96rpx;
    background: #FFFFFF;
    border-radius: 48rpx;
    display: flex;
    margin: 32rpx auto 0;
    .tabs-item {
      flex: 1;
      height: 96rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 48rpx;
      border: 2rpx solid #fff;
    }
    .active {
      border: 2rpx solid #138E88;
      background: #E9F8F6;
      color: #138E88;
    }
  }
}
</style>
